<template>
  <view class="screen-width">
    <van-uploader
      class="mt-3"
      :max-size="3 * 1024 * 1024"
      :before-read="beforeRead"
      @oversize="onOversize"
    >
      <van-button icon="manager-o" size="small" type="primary">更换头像</van-button>
    </van-uploader>

    <upload
      ref="upload"
      :show-cropper="showCropper"
      :imageFileName="imageFileName"
      @closeCropper="closeCropper"
    ></upload>
    <Festival></Festival>
  </view>
</template>
<script>
import upload from "../../components/Upload.vue";
export default {
  components: {
    upload
  },
  data() {
    return {
      showCropper: false, // 截图弹窗遮罩默认隐藏
      imageAccept: "/jpg,/png,/jpeg",
      imageFileName: "",
      imageFile: ""
    };
  },
  methods: {
    // 上传文件过大
    onOversize() {
      this.$notify("图片不能大于3M");
    },

    // 获取文件后缀
    getFileSuffix(fileName) {
      return fileName.match(/\/\w+$/)[0].toLowerCase();
    },

    // 选择图片上传前操作，调起剪裁组件
    beforeRead(file) {
      if (!this.imageAccept.includes(this.getFileSuffix(file.type))) {
        return this.$notify("请上传 jpg/png 格式图片");
      }
      this.showCropper = true;
      this.imageFileName = file.name;
      // 本地图片转成base64，用于截图框显示本地图片
      // this.imageToBase64(file);
      this.$refs.upload.imageToBase64(file);
    },
    closeCropper(img) {
      this.showCropper = false;
      this.imageFile = img;
      console.log(this.imageFile);
    }
  }
};
</script>
<style lang="scss" scoped>
.height100 {
  height: 100vh;
}
.flex-column-center {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}
.vue-cropper {
  background: #000;
  .cropper-view-box {
    outline: 1px solid #fff !important;
    outline-color: #fff !important;
  }
}
</style>